<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>心理咨询师服务系统</title>
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/bootstrap-icons.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/frontend.css') }}" rel="stylesheet">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="{{ url_for('main.index') }}">
                <i class="bi bi-heart-pulse me-2"></i>心理咨询系统
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#features">功能特色</a>
                    </li>
                    
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('main.membership') }}">会员方案</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('main.admin_portal') }}">管理后台</a>
                    </li>
                   
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('members.login') }}">登录</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('members.register') }}">注册</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 英雄区域 -->
    <section class="hero-section text-center">
        <div class="container">
            <h1 class="display-4 fw-bold mb-4">专业心理量表管理系统</h1>
            <p class="lead mb-5">为心理咨询师提供科学、专业、可靠的心理测评工具</p>
            <div class="row justify-content-center">
                <div class="col-md-8">
                   
                    <a href="{{ url_for('members.register') }}" class="btn btn-outline-light btn-lg me-3 mb-2">
                        <i class="bi bi-person-plus me-2"></i>免费注册
                    </a>
                    <a href="{{ url_for('main.membership') }}" class="btn btn-outline-light btn-lg mb-2">
                        <i class="bi bi-star me-2"></i>会员方案
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- 功能特色 -->
    <section id="features" class="py-5">
        <div class="container">
            <h2 class="text-center mb-5">核心功能</h2>
            <div class="row">
                <div class="col-md-4 mb-4">
                    <div class="card feature-card h-100">
                        <div class="card-body text-center">
                            <i class="bi bi-clipboard-data text-primary" style="font-size: 3rem;"></i>
                            <h5 class="card-title mt-3">专业量表库</h5>
                            <p class="card-text">内置PHQ-9、GAD-7、SCL-90等专业心理量表，支持复杂评分体系</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="card feature-card h-100">
                        <div class="card-body text-center">
                            <i class="bi bi-graph-up text-success" style="font-size: 3rem;"></i>
                            <h5 class="card-title mt-3">智能分析</h5>
                            <p class="card-text">多维度数据分析，支持常模对比和风险评估，生成专业报告</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="card feature-card h-100">
                        <div class="card-body text-center">
                            <i class="bi bi-people text-info" style="font-size: 3rem;"></i>
                            <h5 class="card-title mt-3">会员体系</h5>
                            <p class="card-text">灵活的会员权限配置，支持不同级别的功能和服务</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 内置量表展示 -->
    <section class="py-5 bg-light">
        <div class="container">
            <h2 class="text-center mb-5">内置专业量表</h2>
            <div class="row" id="scales-container">
                <!-- 量表卡片将通过JavaScript动态加载 -->
            </div>
            <div class="text-center mt-4">
                <a href="{{ url_for('main.scales') }}" class="btn btn-primary">
                    <i class="bi bi-collection me-2"></i>查看全部量表
                </a>
            </div>
        </div>
    </section>

    <!-- 会员体系 -->
    <section class="py-5">
        <div class="container">
            <h2 class="text-center mb-5">会员体系</h2>
            <div class="row">
                <div class="col-md-4 mb-4">
                    <div class="card text-center">
                        <div class="card-header bg-secondary text-white">
                            <h5>基础会员</h5>
                            <div class="h3">免费</div>
                        </div>
                        <div class="card-body">
                            <ul class="list-unstyled">
                                <li class="mb-2"><i class="bi bi-check text-success me-2"></i>5个基础量表/月</li>
                                <li class="mb-2"><i class="bi bi-check text-success me-2"></i>50次测评/月</li>
                                <li class="mb-2"><i class="bi bi-check text-success me-2"></i>简化版报告</li>
                                <li class="mb-2"><i class="bi bi-check text-success me-2"></i>3个月数据保存</li>
                            </ul>
                            <a href="{{ url_for('members.register') }}" class="btn btn-outline-secondary">立即注册</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="card text-center border-primary">
                        <div class="card-header bg-primary text-white">
                            <h5>专业会员</h5>
                            <div class="h3">￥299<small class="fs-6">/月</small></div>
                        </div>
                        <div class="card-body">
                            <ul class="list-unstyled">
                                <li class="mb-2"><i class="bi bi-check text-success me-2"></i>全部标准量表</li>
                                <li class="mb-2"><i class="bi bi-check text-success me-2"></i>500次测评/月</li>
                                <li class="mb-2"><i class="bi bi-check text-success me-2"></i>详细版报告</li>
                                <li class="mb-2"><i class="bi bi-check text-success me-2"></i>1年数据保存</li>
                                <li class="mb-2"><i class="bi bi-check text-success me-2"></i>AI智能解读</li>
                            </ul>
                            <a href="{{ url_for('main.membership') }}" class="btn btn-primary">立即升级</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="card text-center">
                        <div class="card-header bg-warning text-dark">
                            <h5>机构会员</h5>
                            <div class="h3">￥999<small class="fs-6">/月</small></div>
                        </div>
                        <div class="card-body">
                            <ul class="list-unstyled">
                                <li class="mb-2"><i class="bi bi-check text-success me-2"></i>无限制使用</li>
                                <li class="mb-2"><i class="bi bi-check text-success me-2"></i>团队协作功能</li>
                                <li class="mb-2"><i class="bi bi-check text-success me-2"></i>定制化服务</li>
                                <li class="mb-2"><i class="bi bi-check text-success me-2"></i>永久数据保存</li>
                                <li class="mb-2"><i class="bi bi-check text-success me-2"></i>API接口</li>
                            </ul>
                            <a href="{{ url_for('main.membership') }}" class="btn btn-warning">查看详情</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="text-center mt-4">
                <a href="{{ url_for('main.membership') }}" class="btn btn-primary btn-lg">
                    <i class="bi bi-star me-2"></i>查看详细会员方案
                </a>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-dark text-light py-4">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h6>心理咨询师服务系统</h6>
                    <p class="text-muted">助力心理健康服务专业化发展</p>
                </div>
                <div class="col-md-6 text-md-end">
                    <div class="mb-2">
                        <a href="#" class="text-light me-3">关于我们</a>
                        <a href="#" class="text-light me-3">隐私政策</a>
                        <a href="#" class="text-light">联系我们</a>
                    </div>
                    <div class="mb-2">
                        <small class="text-muted">
                            <i class="bi bi-shield-check me-1"></i>双重用户体系：
                            <a href="{{ url_for('members.login') }}" class="text-light">会员登录</a> | 
                            <a href="{{ url_for('main.admin_portal') }}" class="text-light">管理员登录</a>
                        </small>
                    </div>
                    <p class="text-muted">&copy; 2024 版权所有</p>
                </div>
            </div>
        </div>
    </footer>

    <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
    <script>
        // 动态加载量表数据
        document.addEventListener('DOMContentLoaded', function() {
            loadFeaturedScales();
        });

        async function loadFeaturedScales() {
            try {
                const response = await fetch('/api/scales/featured');
                const data = await response.json();
                
                if (data.success) {
                    renderScales(data.data);
                } else {
                    renderDefaultScales();
                }
            } catch (error) {
                console.error('加载量表失败:', error);
                renderDefaultScales();
            }
        }

        function renderScales(scales) {
            const container = document.getElementById('scales-container');
            container.innerHTML = '';
            
            scales.forEach(scale => {
                const scaleCard = createScaleCard(scale);
                container.appendChild(scaleCard);
            });
        }

        function createScaleCard(scale) {
            const col = document.createElement('div');
            col.className = 'col-lg-3 col-md-6 mb-4';
            
            const badgeColor = getBadgeColor(scale.category);
            
            col.innerHTML = `
                <div class="card h-100">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <h6 class="card-title mb-0">${scale.name}</h6>
                            <span class="badge bg-${badgeColor} scale-badge">${scale.category}</span>
                        </div>
                        <p class="card-text text-muted small">${scale.full_name || ''}</p>
                        <p class="card-text">${scale.description}</p>
                        <a href="/scales/${scale.id}" class="btn btn-outline-primary btn-sm">
                            <i class="bi bi-play-circle me-1"></i>开始测评
                        </a>
                    </div>
                </div>
            `;
            
            return col;
        }

        function getBadgeColor(category) {
            const colorMap = {
                '抑郁筛查': 'danger',
                '焦虑筛查': 'warning',
                '综合症状': 'info',
                '人格测评': 'success',
                '情绪评估': 'primary',
                '认知评估': 'secondary'
            };
            return colorMap[category] || 'primary';
        }

        function renderDefaultScales() {
            const defaultScales = [
                {
                    id: 1,
                    name: 'PHQ-9',
                    full_name: 'Patient Health Questionnaire-9',
                    category: '抑郁筛查',
                    description: '9个条目，评估抑郁症状严重程度，包含自杀风险评估'
                },
                {
                    id: 2,
                    name: 'GAD-7',
                    full_name: 'Generalized Anxiety Disorder 7-item',
                    category: '焦虑筛查',
                    description: '7个条目，广泛性焦虑障碍专业筛查工具'
                },
                {
                    id: 3,
                    name: 'SCL-90',
                    full_name: 'Symptom Checklist-90',
                    category: '综合症状',
                    description: '90个条目，9个因子，全面症状评估'
                },
                {
                    id: 4,
                    name: '16PF',
                    full_name: 'Sixteen Personality Factor',
                    category: '人格测评',
                    description: '16个人格因子，全面人格特质评估'
                }
            ];
            
            renderScales(defaultScales);
        }
    </script>
</body>
</html>